

import React, { useMemo, useState } from 'react';
import RouterView from '../../router/RouterView'
import routerConfig from "../../router/routerConfig"
import { Breadcrumb, Button } from 'antd';
import { ROUTER } from "../../type/router.d"
import { Link, NavLink } from "react-router-dom"
import { Outlet, matchRoutes, useLocation } from "react-router"
import {
  MenuFoldOutlined,
  MenuUnfoldOutlined,
  UploadOutlined,
  UserOutlined,
  VideoCameraOutlined,
} from '@ant-design/icons';
import { Layout, Menu } from 'antd';
import style from "./index.module.scss"
import { findActiveMenu } from "../../untils/public"

const { Header, Sider, Content } = Layout;

interface PROPS {
  routerConfig: ROUTER
}
export default function Home(props: any) {
  const [collapsed, setCollapsed] = useState(false);
  const { routerConfig } = props
  console.log(useLocation())
  const { pathname } = useLocation()

  //实时调用生成面包屑数据的参数
  const breadcrnumbs = useMemo(() => findActiveMenu(pathname), [pathname])
  console.log(breadcrnumbs, "111111111111111111")
  let count = 0
  breadcrnumbs.map((item: any, index: number) => {
    if (item.mame == "工作台") {
      count++
    }
  })
  if (count === 2) {
    breadcrnumbs.splice(1, 1)
  }

  return (
    <Layout>
      <Sider trigger={null} collapsible collapsed={collapsed}>
        <div className="logo" />
        <Button type="primary">
          <NavLink to="/monaco"> +新建</NavLink>

        </Button>
        <Menu
          theme="dark"
          mode="inline"
          defaultSelectedKeys={['1']}
          items={[
            {
              key: '2',
              icon: <VideoCameraOutlined />,
              label: <NavLink to="/home/work">工作台</NavLink>
            },
            {
              key: '1',
              icon: <UserOutlined />,
              label: <NavLink to="">文章管理</NavLink>,
              children: [
                {
                  key: '1-1',
                  icon: <UserOutlined />,
                  label: <NavLink to="/home/allachive">所有文章</NavLink>,
                },
                {
                  key: '1-2',
                  icon: <UserOutlined />,
                  label: <NavLink to="/home/classfiy">分类管理</NavLink>,
                },
                {
                  key: '1-3',
                  icon: <UserOutlined />,
                  label: <NavLink to="/home/tag">标签管理</NavLink>,
                }

              ]
            },

            {
              key: '3',
              icon: <UploadOutlined />,
              label: <NavLink to="/home/page">页面管理</NavLink>
            },
            {
              key: '4',
              icon: <UploadOutlined />,
              label: <NavLink to="/home/comment">评论管理</NavLink>
            },
            {
              key: '5',
              icon: <UploadOutlined />,
              label: <NavLink to="/home/eamil">邮件管理</NavLink>
            },
            {
              key: '6',
              icon: <UploadOutlined />,
              label: <NavLink to="/home/knowledge">知识小册</NavLink>
            },
            ///home/poster
            {
              key: '7',
              icon: <UploadOutlined />,
              label: <NavLink to="/home/poster">海报管理</NavLink>
            },
            //search
            {
              key: '8',
              icon: <UploadOutlined />,
              label: <NavLink to="/home/search">搜素记录</NavLink>
            },
            ///home/user
            {
              key: '9',
              icon: <UploadOutlined />,
              label: <NavLink to="/home/user">用户管理</NavLink>
            },
            ///home/file
            {
              key: '10',
              icon: <UploadOutlined />,
              label: <NavLink to="/home/file">文件管理</NavLink>
            },
            ///home/visit
            {
              key: '11',
              icon: <UploadOutlined />,
              label: <NavLink to="/home/visit">访问统计</NavLink>
            },
            ///home/system
            {
              key: '12',
              icon: <UploadOutlined />,
              label: <NavLink to="/home/system">系统设置</NavLink>
            }
          ]}
        />
      </Sider>
      <Layout className="site-layout">

        <Header className={style["site-layout-background"]} style={{ padding: 0 }}>
          {React.createElement(collapsed ? MenuUnfoldOutlined : MenuFoldOutlined, {
            className: 'trigger',
            onClick: () => setCollapsed(!collapsed),
          })}

        </Header>
        {/* 面包屑 */}
        <div className={style["breadcrumb"]}>

          <Breadcrumb>
            {
              breadcrnumbs && breadcrnumbs.map((item: any, index: number) => {
                return <Breadcrumb.Item key={index}>
                  <Link to={item.path}>{item.name}</Link>
                </Breadcrumb.Item>
              })
            }
          </Breadcrumb>
        </div>
        <Content
          className="site-layout-background"
          style={{
            padding: 24,
            minHeight: 280,
          }}
        >
          <Outlet />
        </Content>
      </Layout>
    </Layout>
    // 
  )
}
